<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--<link rel="stylesheet" href="css/waou.css">-->
    <script src="jquery.js"></script>
    <!--/*<script src="index.js">*/-->
    </script>
</head>

<body>
    <div class="nav_nav">
        <a href="#">
            <img src="logo.png" alt="">
        </a>
        <input type="submit" name="" value="搜索" class="nav_right">
        <input type="text" name="" id="" placeholder="今日特价瓷砖2块5" class="nav_left">
    </div>
    <!--轮播图-->
    <div class="zreo" style="height: 400px;width: 100%; background-color: orange;color: #fff; ">
        <div id="banner">
            <a href="javascript:void(0)" id="left"></a>
            <a href="javascript:void(0)" id="right"></a>
            <div class="pic">
                <img src="ba.jpg" alt="" width="100%;" height="400px;" style="display: block">
                <img src="ba1.jpg" alt="" width="100%;" height="400px;">
                <img src="ba2.jpg" alt="" width="100%;" height="400px;">
                <img src="ba3.jpg" alt="" width="100%;" height="400px;">
            </div>
        </div>
    </div>



    <div class="one" style="height: 280px; width: 100%; text-align: center;background-color: #fff;">
        <div class="one_admin">
            <ul>
                <li>
                    <a href="">
                        <img src="001.png" alt="">
                        <span>全部商品</span>
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="001.png" alt="">
                        <span>建材城</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="002.png" alt="">
                        <span>家具城</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="003.png" alt="">
                        <span>电器城</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="004.png" alt="">
                        <span>装修服务</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="005.png" alt="">
                        <span>购物车</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="006.png" alt="">
                        <span>体验店</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="007.png" alt="">
                        <span>热门活动</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="008.png" alt="">
                        <span>个人中心</span> </a>
                </li>
                <li>
                    <a href="">
                        <img src="002.png" alt="">
                        <span>更多</span> </a>
                </li>

            </ul>
        </div>

    </div>
    <div class="two">
        <img src="abseen.png" alt="">
    </div>
    <div class="there" style="width: 100%; text-align: center;color: #fff;">
        <dl>
            <dt>
                <a href=""><img src="thereleft.png" alt=""></a>
            </dt>
            <dd>
                <span style="border-bottom: 1px solid orange;"><a href=""><img src="thererighttop.png" alt=""></a></span>
            </dd>
            <dd>
                <span><a href=""><img src="thereridown.png" alt=""></a></span>
            </dd>
        </dl>
        <ul>
            <li class="daengshi">
                <a href=""><img src="dengshi.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="therele.png" alt=""></a>
            </li>
        </ul>

    </div>
    <div class="four" style="height: 1290px; width: 100%; color: #000;">
        <div class="four_head">
            <div class="four_nav">
                <h3 class="four_title">每日必看</h3>
            </div>
            <div class="four_title_right">
                <a href="#" style="text-decoration: none;color: #000;   ">
                    <span class="four_more">＞</span>
                    <span class="four_text">更多商品</span>
                </a>
            </div>
        </div>

        <div class="wrap">
            <ul>
                <a>
                    <li><img src="thereridown.png" alt="" style="width:90%;"></li>
                </a>
                <a>
                    <li><img src="thereridown.png" alt="" style="width:90%;"></li>
                </a>
                <a>
                    <li><img src="thereridown.png" alt="" style="width:90%;"></li>
                </a>
                <a>
                    <li><img src="thereridown.png" alt="" style="width:90%;"></li>
                </a>
                <a>
                    <li><img src="thereridown.png" alt="" style="width:90%;"></li>
                </a>
            </ul>
        </div>
        <div class="fitment">
            <div class="fitment_recommend">
                <h2>家具推荐</h2>
            </div>
            <div class="fitment_show">
                <div class="fitment_show_left">
                    <ul>
                        <li>
                            <a href="">
                                <h3>家具简生活</h3>
                                <p>自然简约却又平凡</p>
                                <span>￥2480</span>
                            </a>
                        </li>
                        <li>
                            <img src="jiaju1.png" alt="">
                        </li>
                    </ul>
                </div>
                <div class="fitment_show_right">
                    <ul>
                        <li>
                            <a href="">
                                <h3>家具简生活</h3>
                                <p>自然简约却又平凡</p>
                                <span>￥2480</span>
                            </a>
                        </li>
                        <li>
                            <img src="jiaju7.png" alt="">
                        </li>
                    </ul>
                </div>
                <div class="fitment_down">
                    <ul>
                        <li>
                            <a href="">
                                <div class="down_fir">
                                    <h3>家具简生活</h3>
                                    <p>时尚简约自由</p>
                                    <span>￥5678</span>
                                </div>
                                <img src="jiaju9.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="down_fir">
                                    <h3>家具简生活</h3>
                                    <p>时尚简约自由</p>
                                    <span>￥5678</span>
                                </div>
                                <img src="jiaju10.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="down_fir">
                                    <h3>家具简生活</h3>
                                    <p>时尚简约自由</p>
                                    <span>￥5678</span>
                                </div>
                                <img src="jiaju11.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="down_fir">
                                    <h3>家具简生活</h3>
                                    <p>时尚简约自由</p>
                                    <span>￥5678</span>
                                </div>
                                <img src="jiaju8.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 墙地材料     -->
    <div class="meter_recommend">
        <h2>墙地材料</h2>
    </div>
    <div style="height: 2rem; width: 100%; background-color: #fff;"></div>
    <div class="material">
        <div class="material_head">
            <ul class="">
                <li class="">
                    <div class="head_float_p">
                        <h3>百乐陶瓷瓷砖</h3>
                        <p>百乐瓷砖&nbsp;防滑厨卫瓷砖&nbsp;阳台砖&nbsp;花纹墙面砖</p>
                        <span>￥5.5元</span>
                    </div>
                    <img src="cizhuan11.png" alt="">
                </li>
                <li class="meterial_head_li">
                    <img src="bizhi111.png" alt="">
                </li>
            </ul>
        </div>
        <div class="meterial_cont">
            <ul>
                <li class="ial_cont_li">
                    <a href="">
                        <div class="ial_cont_li_div">
                            <strong>御邦陶瓷</strong>
                            <p>时尚厨卫砖阳台砖</p>
                        </div>
                        <div class="cont_li_span">
                            <span>￥5.5元  </span>
                        </div>
                    </a>
                </li>
                <li style="border-right: 1px solid #c6c6c6;padding-right: 4px;">
                    <a href=""><img src="sd.jpg" alt=""></a>
                </li>
                <li class="ial_cont_li">
                    <a href="">
                        <div class="ial_cont_li_div">
                            <strong>御邦陶瓷</strong>
                            <p>时尚厨卫砖阳台砖</p>
                        </div>
                        <div class="cont_li_span">
                            <span>￥5.5元  </span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href=""><img src="hjgf.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <div class="son_oen" style="height: 380px; width: 100%;display: block;">
            <ul>
                <li class="son_one">
                    <a>
                        <div class="son_one_top">
                            <strong>艾俐缇 </strong>
                            <span>时尚抛光砖</span>
                        </div>
                        <div class="son_one_down">
                            <img src="sd.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li class="son_one">
                    <a>
                        <div class="son_one_top">
                            <strong>艾俐缇</strong>
                            <span>时尚抛光砖</span>
                        </div>
                        <div class="son_one_down">
                            <img src="sd.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li class="son_one" style="border: 0;">
                    <a>
                        <div class="son_one_top">
                            <strong>艾俐缇</strong>
                            <span>时尚抛光砖</span>
                        </div>
                        <div class="son_one_down">
                            <img src="sd.jpg" alt="">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="advert">
        <img src="advivec.png" alt="">
    </div>
    <div class="furniture">
        <div class="furnitrure_left">
            <img src="shafapinzhi.png" alt="">
        </div>

    </div>

    <div style="width: 100%; height: 9000px;background-color: #c6c6c6; display: block;">

    </div>



    <!--返回顶部-->

    <div id="topcontrol" style="position: fixed; bottom: 110px; right: 20px; cursor: pointer; display:none;" title="">
        <img src="top.png" width="40" height="40" />
    </div>
    <!--底部  底部 底部  底部  底部  -->
    <div class="foolter">
        <div class="foolter_bar">
            <div class="bar_div">
                <ul>
                    <li>
                        <a href="">
                            <i class="vf_1"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="vf_2"></i>
                            <span>客服</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="vf_3"></i>
                            <span>分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="vf_4"></i>
                            <span>购物车</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="vf_5"></i>
                            <span>我的</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!--banner-->
    <script src="scroll.js">
    </script>
    <script>
        $(function() {

            var index = 0;
            $('#right').click(function() {
                index++;
                if (index > 4) index = 0;
                $('div.pic img').eq(index).fadeIn().siblings().fadeOut();
            });

            $('#left').click(function() {
                index--;
                if (index < 0) index = 4;
                $('div.pic img').eq(index).fadeIn().siblings().fadeOut();
            });

            setInterval(function() {
                index++;
                index %= 6;
                $('div.pic img').eq(index).fadeIn().siblings().fadeOut();
            }, 3000);
            scrolltotop.offset(100, 120);
            scrolltotop.init();
        });
    </script>
    <script>
        // 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative
        $(function() {
            var oul = $('.wrap ul');
            var oulHtml = oul.html();
            oul.html(oulHtml + oulHtml)
            var timeId = null;

            var ali = $('.wrap ul li');
            var aliWidth = ali.eq(0).width();
            var aliSize = ali.size();
            var ulWidth = aliWidth * aliSize;
            oul.width(ulWidth); //1600px

            var speed = 3;

            function slider() {

                if (speed < 0) {
                    if (oul.css('left') == -ulWidth / 2 + 'px') {
                        oul.css('left', 0);
                    }
                    oul.css('left', '+=-2px');
                }


                if (speed > 0) {
                    if (oul.css('left') == '0px') {
                        oul.css('left', -ulWidth / 2 + 'px');
                    }
                    oul.css('left', '+=' + speed + 'px');
                }

            }

            // setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
            timeId = setInterval(slider, 50);



        });
    </script>
</body>

</html>